<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			.line {
				width: 500px;
				height: 500px;
				border: 5px solid black;
				margin: 50px auto 0;

				/* 线性渐变 */
				/*background-image: linear-gradient(to right, red 200px, yellow, blue);*/

				/*

					位置, 颜色1 渐变位置1, 颜色2 渐变位置2, 颜色3 渐变位置3....
					位置可以是: top, bottom, right, left, left top, right top, left bottom, right bottom;
				*/
				/*background-image: linear-gradient(to right bottom, red 20%, yellow 40%, blue 60%, white);*/
				
				/*
					终点位置也可以是度数, 0deg是从下往上
				*/
				/*background-image: linear-gradient(45deg, red, blue);*/
				
				/*
					transparent: 透明颜色;
				 */
				background-image: linear-gradient(to right, red 0%, red 20%, transparent 20%, transparent 40%, blue 40%, blue 60%, transparent 60%, transparent 80%, black 80%, black);
			}

			.radial {
				width: 500px;
				height: 300px;
				border: 5px solid blue;
				margin: 50px auto 0;
				
				/* 
					径向渐变 
					半径 形状 at 圆心位置, 颜色1 渐变位置1, 颜色2 渐变位置2...., 颜色n

					circle: 圆形;
					ellipse: 椭圆;
				*/
				/*background-image: radial-gradient(200px circle at 200px 200px, red, blue, yellow);*/

				/* 圆心位置 可以为 right, left, top, bottom, center的组合 */
				/*background-image: radial-gradient(200px circle at right center, red, blue, yellow);*/
				
				/*
					closest-side: 最近的边;
					closest-corner: 最近的角;
					farthest-side: 最远的边;
					farthest-corner: 最远的角;
				*/
				background-image: radial-gradient(farthest-side ellipse at 50px 50px, red, yellow, blue);

			}

			.repeatLine {
				width: 400px;
				height: 400px;
				border: 5px solid black;
				margin: 50px auto 0;
				background-image: repeating-linear-gradient(to right, transparent 0, transparent 20px, cyan 20px, cyan 40px),
								  repeating-linear-gradient(to bottom, transparent 0, transparent 20px, blue 20px, blue 40px);
			}

			.repeatRadial {
				width: 600px;
				height: 600px;
				border-radius: 50%;
				background-image: repeating-radial-gradient(10px circle at center center, red, yellow, blue);
			}




		</style>
	</head>
	<body>

		<div class="line"></div>
		<div class="radial"></div>
		<div class="repeatLine"></div>
		<div class="repeatRadial"></div>
		
	</body>
</html>